<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>
    class Model{
        getProData(){
            return ajax1()
        }
        getStuData(){
            return ajax2()
        }
        getTeaData(){
            return ajax3()
        }
    }
    class View{
        view1(data){
            console.log(data)
        }
        view2(data){
            alert(data)
        }
        view3(data){
            document.write(data)
        }
    }
    class Ctrl{
        constructor(){
            this.m = new Model()
            this.v = new View()
        }
        ctrl1(){
            this.m.getProData().then(data=>{
                this.v.view2(data)
            })
        }
        ctrl2(){
            this.m.getStuData().then(data=>{
                this.v.view3(data)
            })
        }
        ctrl3(){
            this.m.getTeaData().then(data=>{
                this.v.view1(data)
            })
        }
        ctrl4(){
            this.m.getProData().then(data=>{
                this.v.view1(data)
            })
        }
    }


    var c = new Ctrl()

    c.ctrl1()
    c.ctrl2()
    c.ctrl3()
    c.ctrl4()






    function ajax1(){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(JSON.stringify([{name:"手机"},{name:"电脑"}]))
            }, 500);
        })
    }
    function ajax2(){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(JSON.stringify([{name:"张三"},{name:"李四"}]))
            }, 500);
        })
    }
    function ajax3(){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(JSON.stringify([{name:"李老师"},{name:"王校长"}]))
            }, 500);
        })
    }
</script>
</html>